<template>
  <div class="chat-container">
    <!-- 会话侧边栏 -->
    <div class="conversation-sidebar">
      <button class="new-chat" @click="createNewConversation">
        + New Chat
      </button>
      <div
        v-for="conv in conversations"
        :key="conv.id"
        class="conversation-item"
        :class="{ active: conv.id === activeConversation?.id }"
        @click="selectConversation(conv.id)"
      >
        <div class="conv-name">{{ conv.name }}</div>
        <div class="conv-meta">
          <span>{{ conv.message_count }} messages</span>
          <span>{{ formatTime(conv.updated_at) }}</span>
        </div>
      </div>
    </div>

    <!-- 主聊天区域 -->
    <div class="chat-main">
      <div class="message-list">
        <div
          v-for="msg in messages"
          :key="msg.id"
          class="message-item"
          :class="msg.answer ? 'bot-message' : 'user-message'"
        >
          <div class="message-content">
            <div v-if="msg.query" class="user-query">
              <div class="avatar">👤</div>
              <div class="text">{{ msg.query }}</div>
            </div>
            <div v-if="msg.answer" class="bot-answer">
              <div class="avatar">🤖</div>
              <div class="text">{{ msg.answer }}</div>
            </div>
          </div>
        </div>
      </div>
      <ChatInput @send="handleSend" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import ChatInput from './ChatInput.vue'
import { Conversation, Message, SendMessageParams } from '@/types/dify'

const difyChat = namespace('difyChat')

@Component({
  components: { ChatInput }
})
export default class ChatWindow extends Vue {
  @difyChat.State activeConversation!: Conversation | null
  @difyChat.State conversations!: Conversation[]
  @difyChat.State messages!: Message[]
  @difyChat.Action selectConversation!: (id: string | null) => Promise<void>
  @difyChat.Action loadConversations!: () => Promise<void>
  @difyChat.Action sendMessage!: (params: SendMessageParams) => Promise<void>

  mounted() {
    this.loadConversations()
  }

  formatTime(timestamp: number): string {
    return new Date(timestamp * 1000).toLocaleString()
  }

  createNewConversation() {
    this.selectConversation(null)
  }

  handleSend(message: string, files: string[]) {
    this.sendMessage({
      query: message,
      files,
      conversation_id: this.activeConversation?.id
    })
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
}

.conversation-sidebar {
  width: 280px;
  border-right: 1px solid #eee;
  padding: 1rem;
  overflow-y: auto;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.message-item {
  margin-bottom: 1rem;
}

.avatar {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.user-message .text {
  background: #f0f2f5;
  padding: 0.75rem;
  border-radius: 1rem;
}

.bot-message .text {
  background: #e3f2fd;
  padding: 0.75rem;
  border-radius: 1rem;
}
</style>